<template>
    <el-row :gutter="20">
        <el-col :span="24">
            <h3>vuedraggable 示例</h3>
        </el-col>
        <el-divider></el-divider>
        <el-col :span="12">
            <draggable
                :list="list1"
                class="list-group"
                :move="checkMove"
                handle=".drag-bar"
                group="group1"
                animation="300"
            >
                <transition-group tag="el-row" style="min-height: 100px;">
                    <el-col v-for="element in list1"
                        :key="element.name" 
                        :span="12">
                        <div class="list-group-item">
                            {{ element.name }}
                            <div class="drag-bar">
                                <FontIcon icon-name="el-icon-more"></FontIcon>
                            </div>
                        </div>
                    </el-col>
                </transition-group>
            </draggable>
        </el-col>
        <el-col :span="12">
            <draggable
                :list="list2"
                class="list-group"
                :move="checkMove"
                handle=".drag-bar"
                group="group1"
                animation="300"
            >
                <transition-group tag="el-row" style="min-height: 100px;">
                    <el-col v-for="element in list2"
                        :key="element.name" 
                        :span="12">
                        <div class="list-group-item">
                            {{ element.name }}
                            <div class="drag-bar">
                                <FontIcon icon-name="el-icon-more"></FontIcon>
                            </div>
                        </div>
                    </el-col>
                </transition-group>
            </draggable>
        </el-col>
    </el-row>
</template>

<script>
import draggable from "vuedraggable";
let id = 1;

export default {
    name: "simple",
    display: "Simple",
    order: 0,
    components: {
        draggable
    },
    data() {
        return {
            dragging: false,
            list1: [
                { name: "苹果", id: 'S1' },
                { name: "梨子", id: 'S2' },
                { name: "香蕉", id: 'S3' },
            ],
            list2: [
                { name: "奔驰", id: 'C1' },
                { name: "宝马", id: 'C2' },
                { name: "保时捷", id: 'C3' },
            ],
        };
    },
    methods: {
        checkMove: function (e) {
            window.console.log("Future index: " + e.draggedContext.futureIndex);
        },
    },
};
</script>
<style lang="scss" scoped>
.buttons {
  margin-top: 35px;
}
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
.list-group{
    border: 1px solid #DCDFE6;
    max-height: 200px;
    overflow: scroll;
    padding: 10px;
    .list-group-item{
        border: 1px solid #DCDFE6;
        background-color: #F2F6FC;
        border-radius: 8px;
        padding: 10px;
        margin-top: 10px;
        position: relative;
        box-sizing: border-box;
        .drag-bar{
            position: absolute;
            top: 0;
            right: 0;
            display: inline-block;
            padding: 4px;
            cursor: move;
        }
    }
}
</style>